<template>
    <div style="margin-left: 10px">
        <div style="margin-top: 10px">
            <el-input
                style="width: 600px"
                placeholder="请输入配置名称"
                v-model="name"
                clearable
            >
                <template slot="prepend">配置信息录入</template>
                <el-button
                    slot="append"
                    type="success"
                    plain
                    @click="save = !save"
                >Save
                </el-button>
            </el-input>
        </div>
        <div>
            <el-input
                class="input-with-select"
                placeholder="请输入 base_url 地址"
                v-model="baseUrl"
                clearable
            >
                <template slot="prepend">配置请求地址</template>
            </el-input>
            <el-tooltip :content="'teststep失败后testcase是否中止: '+ failfast" placement="top">
                <el-switch
                    style="display: inline"
                    v-model="failfast"
                    active-color="#ff4949"
                    inactive-color="#13ce66"
                    active-value=false
                    inactive-value=true
                >
                </el-switch>
            </el-tooltip>
        </div>

        <div class="request">
            <el-tabs
                v-model="activeTag"
                style="margin-left: 20px"
            >
                <el-tab-pane label="Header" name="first">
                    <headers
                        :save="save"
                        v-on:header="handleHeader"
                        :header="response ? response.body.header: [] "
                        :isDisabled="isDisabled">
                    </headers>
                </el-tab-pane>

                <el-tab-pane label="Request" name="second">
                    <request
                        :save="save"
                        v-on:request="handleRequest"
                        :request="response ? response.body.request: []"
                        :isDisabled="isDisabled"
                    >
                    </request>
                </el-tab-pane>

                <el-tab-pane label="Variables" name="third">
                    <variables
                        :save="save"
                        v-on:variables="handleVariables"
                        :variables="response ? response.body.variables : []"
                    >
                    </variables>
                </el-tab-pane>

                <el-tab-pane label="Hooks" name="fourth">
                    <hooks
                        :save="save"
                        v-on:hooks="handleHooks"
                        :hooks="response ? response.body.hooks: []"
                        :isDisabled="isDisabled"
                    >
                    </hooks>
                </el-tab-pane>

              <el-tab-pane label="outPut" name="six">
                <Out-params
                  :save="save"
                  v-on:outParams="handleOutput"
                  :outParams="response ? response.body.outParams: []"
                  :isDisabled="isDisabled"
                >
                </Out-params>
              </el-tab-pane>

                <el-tab-pane label="Parameters" name="five">
                    <parameters
                      :save="save"
                      v-on:parameters="handleParameters"
                      :parameters="response ? response.body.parameters: []"
                      :isDisabled="isDisabled"
                    >
                    </parameters>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

</template>

<script>
    import Headers from '../../../httprunner/components/Headers'
    import Request from '../../../httprunner/components/Request'
    import Variables from '../../../httprunner/components/Variables'
    import Hooks from '../../../httprunner/components/Hooks'
    import Parameters from '../../../httprunner/components/Parameters'
    import OutParams from '../../../httprunner/components/OutParams'

    export default {
        components: {
            Headers,
            Request,
            Variables,
            Hooks,
            Parameters,
            OutParams
        },

        props: {
            project: {
                require: false
            },
            response: {
                require: false
            }
        },

        watch: {
            response: function () {
                this.name = this.response.body.name;
                this.baseUrl = this.response.body.base_url;
                this.id = this.response.id;
                if (this.response.body.failFast){
                    this.failfast =  this.response.body.failFast;
                }else{
                    this.failfast = true;
                }
            }
        },

        methods: {
            handleHeader(header) {
                this.header = header;
            },
            handleRequest(request) {
                this.request = request;
            },
            handleOutput(outParams) {
               this.outParams = outParams;
            },
            handleVariables(variables) {
                this.variables = variables;
            },
            handleHooks(hooks) {
                this.hooks = hooks;
            },
            handleParameters(parameters) {
                this.parameters = parameters;
                if (this.id === '') {
                    this.addConfig();
                } else {
                    this.updateConfig();
                }
            },

            addConfig() {
                if (this.validateData()) {
                    this.$api.addConfig({
                        parameters: this.parameters,
                        header: this.header,
                        request: this.request,
                        variables: this.variables,
                        hooks: this.hooks,
                        base_url: this.baseUrl,
                        name: this.name,
                        project: this.project,
                        failFast: this.failfast,
                        outParams: this.outParams
                    }).then(resp => {
                        if (resp.success) {
                            this.$emit("addSuccess");
                            this.$notify.success("配置添加成功")
                        } else {
                            this.$message.error(resp.msg)
                        }
                    })
                }
            },

            updateConfig() {
                if (this.validateData()) {
                    this.$api.updateConfig(this.id, {
                        parameters: this.parameters,
                        header: this.header,
                        request: this.request,
                        variables: this.variables,
                        hooks: this.hooks,
                        base_url: this.baseUrl,
                        name: this.name,
                        project: this.project,
                        failFast: this.failfast,
                        outParams: this.outParams
                    }).then(resp => {
                        if (resp.success) {
                            this.$emit("addSuccess");
                            this.$notify.success(resp.msg);
                        } else {
                            this.$notify.error(resp.msg)
                        }
                    })
                }
            },

            validateData() {
                if (this.name === '') {
                    this.$notify.error('配置名称不能为空');
                    return false;
                }
                return true
            },

        },

        data() {
            return {
                name: '',
                baseUrl: '',
                id: '',
                header: [],
                request: [],
                variables: [],
                hooks: [],
                parameters: [],
                outParams:[],
                save: false,
                activeTag: 'third',
                failfast: '',
                isDisabled:true
            }
        },
        name: "ConfigBody"
    }
</script>

<style scoped>
    .el-select {
        width: 130px;
    }

    .input-with-select {
        width: 600px;
        margin-top: 10px;
    }

    .request {
        margin-top: 15px;
        border: 1px solid #ddd;
    }

</style>
